<!-- product -->
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';
  /* 顶部导航栏 */

  .product-container {
    height: 100%;
    background: #f8f8f8;
    .product-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1500;
      height: 1.25rem;
      background: #fff;
      border-bottom: 1px solid $border;
      .product-header-container {
        height: 100%;
        padding: 0px $padding;
        @include flexbox(space-between, center, row, nowrap);
        .goback {
          i {
            display: block;
            width: .65rem;
            height: .65rem;
            background: url('~assets/common/images/arrow-left.png') no-repeat;
            background-size: 100%;
          }
        }
        .product-tabs {
          max-width: 3.5rem;
          margin-right: 30px;
          height: 100%;
          @include flexbox(space-between,
          center,
          row,
          nowrap);
          position: relative;
          #loadingbar {
            position: absolute;
            transition: .4s;
            width: calc((100%/3));
            background: #000;
            bottom: -1px;
            height: 2px;
          }
          .product-tabs-item {
            width: 33.33%;
            @include flexbox(center,
            center,
            row,
            nowrap);
            flex: initial;
            text-align: center;
            color: #333;
            font-size: $subtitle;
            height: 100%;
            &.active {
              font-size: $title;
            }
          }
        }
        .other {
          .icon-cart {
            position: relative;
            display: block;
            right: 10px;
            font-size: 26px;
            .mint-badge {
              position: absolute;
              left: 15px;
              top: 0;
            }
          }
        }
      }
    }
    /* 顶部导航栏 */
    /* 商品 */
    #mainLayout {
      .prouct-swiper {
        box-shadow: 0px 0px 6px 1px #eee;
        position: relative;
        .swiper-indicators {
          font-size: $title;
          z-index: 666;
          position: absolute;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          -webkit-border-radius: 50%;
          background: rgba(0, 0, 0, .15);
          right: 15px;
          bottom: 11px;
          text-align: center;
          line-height: 40px;
          color: #fff;
          overflow: hidden;
        }
        .scroll-images {
          text-align: center;
          background: #ffffff;
          height: 8rem;
          .mint-swipe-item {
            display: flex;
            /*Flex布局*/
            display: -webkit-flex;
            /* Safari */
            align-items: center;
            /*指定垂直居中*/
            img {
              margin: auto;
              max-width: 100%;
              max-height: 100%;
            }
          }
        }
      }
      .product-title-text {
        @include flexbox(space-between,
        flex-start,
        column,
        wrap);
        padding: $padding;
        background: #fff;
        .product-name-text {
          font-size: $title;
          color: #232326;
          @include textoverflow(2);
        }
        .product-price {
          padding-top: 5px;
          @include flexbox(space-between,
          center,
          row,
          nowrap);
          width: 100%;
          .left {
            color: #f23030;
            text-align: left;
            span {
              font-size: 14px;
              margin-right: 3px;
            }
            strong {
              font-size: 20px;
            }
            .original-price {
              color: #999;
              font-size: 12px;
              i {
                text-decoration: line-through;
              }
            }
          }
          .right {

            color: #ffffff;
            background-color: #FF5959;
            box-shadow: 0 0 1px #FF5959;
            padding: 0px 20px;
            height: 26px;
          }
        }
      }
      .product-info {
        margin-top: $margin;
        background: #fff;
        h1 {
          padding: $padding;
          color: #333333;
          font-weight: 600;
          font-size: 16px;
        }
        table {
          border-collapse: collapse;
          width: 100%;
          color: #232323;
          th {
            border-top: 1px solid #e4e4e4;
            border-bottom: 1px solid #e4e4e4;
            padding: 10px;
            text-align: left;
            font-weight: normal;
            &:first-child {
              color: #b5b5b5;
            }
          }
          td {
            border-left: 1px solid #e4e4e4;
            border-bottom: 1px solid #e4e4e4;
            padding: 10px;
            &:first-child {
              background: #f9f9f9;
              color: #b5b5b5;
              border-left: 0px;
            }
          }
        }
        .img-list {
          padding: $padding;
          img {
            width: 100%;
            height: auto
          }
        }
      }
    }
    /* 商品 */
    /* 商品库存信息 */
    #stockDetail {
      .good-info-top {
        position: fixed;
        top: 1.25rem;
        z-index: 1000;
        @include flexbox(space-between,
        flex-start,
        column,
        nowrap);
        background: #fff;
        .prod {
          border-bottom: 1px solid #eee;
          background: #fff;
          @include flexbox(space-between,
          flex-start,
          row,
          nowrap);
          padding: 5px 0px 0px 5px;
          flex: initial;
          .img-warp {
            width: 100px;
            height: 100px;
            img {
              margin: auto;
              display: block;
              max-width: 100%;
              max-height: 100%;
            }
          }

          .prod-info {
            font-size: 14px;
            color: #333;
            margin-left: 10px;
            padding-right: 5px;
            @include flexbox(space-between,
            flex-start,
            column,
            wrap);
            .prod-title {
              @include textoverflow(2);
              line-height: 18px;
            }
            .prod-code {
              padding: 5px 0;
            }
            .prod-price {
              padding: 5px 0;
              text-align: left;
              span {
                font-size: 14px;
                margin-right: 5px;
              }
            }
          }
        }
        .stock-header {
          background: #fff;
          width: 100%;
          @include flexbox(space-between,
          center,
          row,
          nowrap);
          -moz-box-shadow: 0px 1px 2px #D4DCE1;
          -webkit-box-shadow: 0px 1px 2px #D4DCE1;
          box-shadow: 0px 1px 2px #D4DCE1;
          .item {
            @include flexbox(center,
            center,
            row,
            nowrap);
            color: #333;
            font-size: 14px;
            flex-grow: 1;
            padding: 12px 0;
            &:last-child {
              flex-grow: 1.5
            }
          }
        }
      }
      .stock-info {
        width: 100%;
        position: relative;
        padding-top: 147px;
        background: #FCFCFC;
        height: auto;
        .supplier {
          .supplier-name {
            background: #F5F9FC;
            line-height: 35px;
            padding-left: 3vw;
          }
          .stock-list {
            background: #FCFCFC;
            li {
              @include flexbox(space-between,
              center,
              row,
              nowrap);
              border-bottom: 1px solid #D4DCE1;
              .stock-item {
                @include flexbox(center,
                center,
                row,
                nowrap);
                color: #333;
                font-size: 12px;
                padding: 12px 0;
                flex-grow: 1;
                button {
                  border: 1px solid #FF0000;
                  line-height: 25px;
                  padding: 0 4vw;
                  color: #FF0000;
                  border-radius: 30px;
                  background: #ffffff;
                  box-shadow: 0 0 0;
                }
                &:last-child {
                  flex-grow: 1.5
                }
              }
            }
          }
        }
      }
    }
    /* 商品库存信息 */
  }
</style>


<template>
  <div class="product-container">
    <!-- 顶部导航栏 -->
    <div class="product-header">
      <div class="product-header-container">
        <div class="goback" @click="$router.go(-1)">
          <i class="back"></i>
        </div>
        <div class="product-tabs">
          <span @click="switchTabs('mainLayout')" :class="['product-tabs-item',containerTab==='mainLayout'?'active':'']">商品</span>
          <span @click="switchTabs('stockDetail')" :class="['product-tabs-item',containerTab==='stockDetail'?'active':'']">库存</span>
          <div id="loadingbar" :style="containerTab==='mainLayout' ? 'left:1%' :  'left:65.66%'"></div>
        </div>
        <div class="other">
          <i class="iconfont icon-cart" @click="$router.push('/cart')"><mt-badge size="small" color="#f23030">{{cartNum}}</mt-badge></i>
        </div>
      </div>
    </div>
    <!-- 顶部导航栏 -->
    <!-- 内容区 -->
    <mt-tab-container v-model="containerTab" style="padding-top: 1.25rem;overflow-y: scroll;height:100%">
      <!-- 商品 -->
      <mt-tab-container-item id="mainLayout" v-if="containerTab==='mainLayout'">
        <div id="mainLayout">
          <!-- 商品轮播图 -->
          <div class="prouct-swiper">
            <mt-swipe @change="handleChange" :stopPropagation="true" :prevent="true" class="scroll-images">
              <mt-swipe-item v-for="(item,index) in imgList" :key="index">
                <img :src="item">
              </mt-swipe-item>
            </mt-swipe>
          </div>
          <!-- 商品轮播图 -->
          <!-- 商品信息 -->
          <div class="product-title-text">
            <p class="product-name-text">{{productInfo.sellingPoints}}</p>
            <p class="product-summary-text">{{productInfo.summary}}</p>
            <div class="product-price">
              <div class="left">
                <span>&yen;</span>
                <strong>{{purchasePrice|formatMoney}}</strong>
                <span class="original-price">&yen;<i>{{productInfo.goodsMoney|formatMoney}}</i></span>
              </div>
              <mt-button class="right" size="small" @click="switchTabs('stockDetail')">
                立即购买
              </mt-button>
            </div>

          </div>
          <!-- 商品详细信息 -->
          <div class="product-info">
            <h1>参数</h1>
            <table>
              <thead>
                <tr>
                  <th>
                    货号
                  </th>
                  <th>
                    {{productInfo.goodsCode}}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    品牌
                  </td>
                  <td>
                    {{productInfo.brandName}}
                  </td>
                </tr>
                <tr>
                  <td>
                    款式
                  </td>
                  <td>
                    {{productInfo.goodsStyle}}
                  </td>
                </tr>
                <tr>
                  <td>
                    标准零售价
                  </td>
                  <td>
                    {{productInfo.goodsPrice|formatMoney}}
                  </td>
                </tr>
                <tr>
                  <td>
                    上市时间
                  </td>
                  <td>
                    {{productInfo.goodsYear}}
                  </td>
                </tr>
                <tr>
                  <td>
                    试穿季节
                  </td>
                  <td>
                    {{productInfo.goodsSeason|goodsSeason}}
                  </td>
                </tr>
                <tr>
                  <td>
                    试穿性别
                  </td>
                  <td>
                    {{productInfo.goodsSex|goodsSex}}
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="img-list">
              <div v-for="(item,index) in productInfo.imgsList" :key="index">
                <img v-lazy="item.goodsPath+item.goodsImg">
              </div>
            </div>
          </div>
          <!-- 商品详细信息 -->

        </div>
      </mt-tab-container-item>
      <!-- 商品 -->
      <!-- 商品库存信息 -->
      <mt-tab-container-item id="stockDetail">
        <div id="stockDetail">
          <div class="good-info-top" v-if="productInfo">
            <div class="prod">
              <div class="img-warp">
                <img :src="thumbImg" alt="">
              </div>
              <div class="prod-info">
                <p class="prod-title">
                  {{productInfo.sellingPoints}}
                </p>
                <p class="prod-code">
                  {{productInfo.goodsCode}}
                </p>
                <p class="prod-price"> 标准零售价: <span>&yen;</span>{{productInfo.goodsMoney}}</p>
              </div>
            </div>
            <ul class="stock-header">
              <li class="item"> 尺码</li>
              <li class="item"> 价格</li>
              <li class="item"> 数量</li>
              <li class="item"></li>
            </ul>
          </div>
          <div class="stock-info clearfix" v-if="stockData">
            <!--如果不是激想的不显示-->
            <div class="supplier" v-for="(item,index) in stockData" :key="index" v-if="item.uId!='115d742f38a8434ba471bd53135f874e'">
              <div class="supplier-name" v-if="item.specList.length>0">
                {{item.supplierWarehouse}}
              </div>
              <ul class="stock-list">
                <li class="" v-for="spec in item.specList" :key="spec.sizeId">
                  <div class="stock-item">{{spec.sizeName}} <span v-if="spec.sizeAlias">({{spec.sizeAlias}})</span> </div>
                  <div class="stock-item">{{item.purchasePrice}}</div>
                  <div class="stock-item">{{spec.goodsStockNum}}</div>
                  <div class="stock-item">
                    <button @click="addShopCart(item,spec.sizeId)">立即购买</button>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </mt-tab-container-item>
      <!-- 商品库存信息 -->
    </mt-tab-container>
    <!-- 内容区 -->
    <!-- 返回顶部 -->
    <BackHead/>
    <!-- 返回顶部 -->
  </div>
</template>

<script>
  import {
    TabContainer,
    TabContainerItem,
    Swipe,
    Toast,
    SwipeItem,
    MessageBox
  } from 'mint-ui';
  import {
    mapGetters
  } from 'vuex';
  import {
    getGoodsDetails,
    getSpecInfo
  } from '@/service/getData'
  import LoadMore from 'common/loadMore';
  import BackHead from 'common/backHead';

  export default {
    data() {
      return {
        goodsId: '',
        purchasePrice: 0,
        stockData: [],
        containerTab: 'mainLayout',
        detailTab: 'description',
        productInfo: {},
        shopInfo: null,
        recommendParam: {
          Type: 'recommend',
          pageSize: 10,
          pageIndex: 1
        },
        recommendData: [],
        swipeIndex: {
          nowIndex: 1,
          total: 0
        },
        thumbImg: '',
        imgList: []
      };
    },
    components: {
      TabContainer,
      TabContainerItem,
      Swipe,
      SwipeItem,
      LoadMore,
      BackHead
    },

    computed: {
      ...mapGetters([
        'userInfo',
        'cartNum'
      ]),
      // thumbImg() {
      //    return this.productInfo.imgsList[0].goodsPath + '5.jpg';
      // },
    },
    methods: {
      switchTabs(Id) {
        if (this.containerTab === String(Id)) return;
        this.containerTab = Id;
        switch (String(this.containerTab)) {
          case 'mainLayout':
            break;
          case 'stockDetail':
            break;
          default: //其他
            throw new Error('未知TabId')
            break
        }
      },

      handleChange(index) {
        this.swipeIndex.nowIndex = index + 1;
      },

      async addShopCart(item, sizeId) { //加入购物车
        let params = {
          userId: this.userInfo.id,
          status: 4, //状态：1 采购 2 分销 3 分享 4金桥
          uId: item.uId,
          goodsDetailsId: item.goodsDetailsId,
          sizeId: sizeId,
          cartNum: 1, //手机端下单默认是1
        };

        // this.$store.dispatch('AddShopCart', params)
        //   .then(response => {
        //     MessageBox({
        //       title: '成功加入购物车',
        //       cancelButtonText: '继续添加',
        //       confirmButtonText: '前往结算',
        //       message: '<div style="text-align:center">当前购物车共' + num + '件商品</div>',
        //       showCancelButton: true
        //     }).then(action => {
        //       if (action === 'confirm') {
        //         this.$router.push('/cart')
        //       }
        //     }).catch(() => {})
        //   })
        // 加入购物车
        this.$store.dispatch('AddShopCart', params)
          .then(res => {
            this.skuVisible = false
            // 添加购物车数量
            const num = this.cartNum + 1
            console.log(this.cartNum)
            this.$store.dispatch('addCartNum', num)
            MessageBox({
              title: '成功加入购物车',
              cancelButtonText: '继续添加',
              confirmButtonText: '前往结算',
              message: '<div style="text-align:center">当前购物车共' + num + '件商品</div>',
              showCancelButton: true
            }).then(action => {
              if (action === 'confirm') {
                this.$router.push('/cart')
              }
            }).catch(() => {})
          }).catch(err => {
            Toast({
              message: err.info
            })
          })
      },
      async initData() {
        // 判断是否登录
        if (!this.userInfo) return
        this.goodsId = this.$route.params.id;
        let {
          data
        } = await getGoodsDetails({
          goodsId: this.goodsId,
          userId: this.userInfo.id
        });
        this.productInfo = data.goodsDetails;
        //获取供应商库存
        let specInfo = await getSpecInfo({
          goodsId: this.goodsId,
          userId: this.userInfo.id
        });
        //console.log(specInfo.data.supplierList)
        this.stockData = specInfo.data.supplierList;
        this.purchasePrice = specInfo.data.supplierList[0].purchasePrice;
        //清除场景图
        this.productInfo.imgsList.map((el, index) => {
          if (el.goodsImg.substring(2, 0) != "60") {
            this.imgList.push(el.goodsPath + el.goodsImg);
            if (el.goodsImg == "5.jpg") {
              this.thumbImg = el.goodsPath + el.goodsImg;
            }
          }
        })
        this.imgList = this.imgList.reverse();

        //缩略图
        this.thumbImg == "" ? imgList[0] : this.thumbImg;
        const formData = {
          userId: this.userInfo.id,
          status: 4 // 4金桥一卡通
        }
        this.$store.dispatch('getCartNum', formData)
      }
    },

    mounted: function () {
      this.initData();
    },
    filters: {
      //商品季节：1春季2夏季3秋季4冬季
      goodsSeason: function (value) {
        switch (value) {
          case 1:
            return '春季'
            break
          case 2:
            return '夏季'
            break
          case 3:
            return '秋季'
            break
          case 4:
            return '冬季'
            break
        }
      },
      //商品性别：1男 2女 3中性
      goodsSex: function (value) {
        switch (value) {
          case 1:
            return '男'
            break
          case 2:
            return '女'
            break
          case 3:
            return '中性'
            break
        }
      }
    },

    // beforeRouteLeave(to, from, next) {
    //    if (to.path == "/list") {
    //       to.meta.keepAlive = true;
    //    } else {
    //       to.meta.keepAlive = false;
    //    }
    //    next();
    // },

  }
</script>